<template>
  <div class="bg-con">
    <div class="stepscon">
      <el-steps
        :active="active"
        class="steps"
        :space="900"
        align-center
        finish-status="success"
      >
        <el-step title="基础信息/店铺"> </el-step>
        <el-step title="商品信息"> </el-step>
      </el-steps>
    </div>
    <!-- 步骤1 -->
    <div v-show="active == 1">
      <div class="upload-con">
        <div class="leftcon">
          <el-form
            class="shopform"
            :rules="udatarule"
            :model="udata"
            ref="udata"
            label-width="80"
            label-position="top"
          >
            <el-form-item
              label="企业信息"
              :prop="`companyShops.${index}.value`"
              :rules="udatarule.value"
            >
              <el-select
                v-model="udata.value"
                placeholder="请选择企业"
                style="width: 200px;"
              >
                <el-option
                  v-for="(item, index) in udata.companyShops"
                  :key="index"
                  :value="item.companyName"
                >
                  <span style="color: #8492a6; font-size: 13px;">{{
                    item.companyName
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="税号">
              <el-input
                v-model="udata.company.taxNumber"
                style="width: 200px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="经营期限">
              <el-input
                v-model="udata.company.operatingPeriodEnd"
                style="width: 200px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="经营范围">
              <el-input
                style="width: 200px;"
                type="textarea"
                autosize
                maxlength="150"
                placeholder=""
                rows="5"
                v-model="udata.company.businessCope"
                class="resizenone"
              ></el-input>
            </el-form-item>
            <el-form-item label="数据周期">
              <el-input
                v-model="udata.company.operatingPeriodStart"
                style="width: 200px;"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="rightcon">
          <p style="font-size: 20px;">店铺:</p>
          <!-- 店铺 -->
          <el-form
            key="0"
            :rules="udatarule"
            ref="udata"
            :model="udata"
            inline
            label-position="top"
            class="demo-form-inline form-items"
          >
            <el-row
              :gutter="20"
              v-for="(item, index) in udata.companyShops"
              :key="index"
              style="height: 100px;"
            >
              <el-form-item
                label="店铺名字"
                :prop="'companyShops.' + index + '.name'"
                :rules="udatarule.name"
              >
                <el-input
                  v-model="item.name"
                  placeholder="请填写店铺名字"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="渠道"
                :prop="`companyShops.${index}.channelName`"
                :rules="udatarule.channelName"
              >
                <el-input
                  v-model="item.channelName"
                  placeholder="请填写渠道"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="链接"
                :prop="`companyShops.${index}.shopUrl`"
                :rules="udatarule.shopUrl"
              >
                <el-input
                  v-model="item.shopUrl"
                  placeholder="请输入商品链接"
                ></el-input>
              </el-form-item>
              <el-form-item style="padding: 40px;">
                <template slot-scope="scope">
                  <i
                    style="width: 50px; cursor: pointer;"
                    class="el-icon-delete"
                    @click="handleDeletetab1(index, scope.row)"
                  ></i>
                  <i
                    style="width: 50px; cursor: pointer;"
                    class="el-icon-circle-plus-outline"
                    @click="add(index, scope.row)"
                  ></i>
                </template>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 步骤2 -->
    <div v-show="active == 2">
      <div class="active2">
        <el-container>
          <el-aside style="margin-top: 15px;">
            <p>店铺:</p>
            <div class="tablist">
              <el-table
                :data="udata.companyShops"
                @cell-click="skiptomap"
                fit
                highlight-current-row
                stripe
              >
                <el-table-column
                  prop="name"
                  lable="名字"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </el-aside>
          <div v-if="selectShopGoods.length > 0">
            <el-main class="acitvemain">
              <el-form
                key="2"
                ref="tabtwoform"
                :rules="udatatab2rule"
                :model="udata"
                inline
                label-position="top"
                class="demo-form-inline form-items"
              >
                <el-row
                  v-for="(item, index) in selectShopGoods"
                  :key="item.id"
                  style="height: 100px;"
                >
                  <!-- <el-form-item label="商品ID" label-width="100" v-show="false">
                    <el-input v-model="item.id" placeholder=""></el-input>
                  </el-form-item>

                  <el-form-item label="店铺ID" label-width="100" v-show="false">
                    <el-input v-model="item.shopId" placeholder=""></el-input>
                  </el-form-item> -->

                  <el-form-item
                    label="商品名称"
                    :rules="udatatab2rule.name"
                    :prop="'selectShopGoods.' + '.name'"
                  >
                    <el-input
                      v-model="item.name"
                      placeholder="请输入商品名称"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="规格"
                    :prop="`selectShopGoods.${index}.shopSpecs`"
                    :rules="udatatab2rule.shopSpecs"
                  >
                    <el-input
                      v-model="item.shopSpecs"
                      placeholder="请输入规格"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="分类"
                    :prop="`selectShopGoods.${index}.goodsClassificationName`"
                    :rules="udatatab2rule.goodsClassificationName"
                  >
                    <el-input
                      v-model="item.goodsClassificationName"
                      placeholder="请将商品分类"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="单价"
                    :prop="`selectShopGoods.${index}.salePrice`"
                    :rules="udatatab2rule.salePrice"
                  >
                    <el-input
                      v-model="item.salePrice"
                      placeholder="请输入单价"
                    ></el-input>
                  </el-form-item>

                  <el-form-item
                    label="月销量"
                    :prop="`selectShopGoods.${index}.rangeNum`"
                    :rules="udatatab2rule.rangeNum"
                  >
                    <el-input
                      v-model="item.rangeNum"
                      placeholder="请输入销量"
                    ></el-input>
                  </el-form-item>

                  <el-form-item style="padding: 45px;">
                    <template slot-scope="scope">
                      <i
                        style="width: 50px; cursor: pointer;"
                        class="el-icon-delete"
                        @click="handleDeletetab2(index, scope.row)"
                      ></i>
                      <i
                        style="width: 50px; cursor: pointer;"
                        class="el-icon-circle-plus-outline"
                        @click="addtab2(index, scope.row)"
                      ></i>
                    </template>
                  </el-form-item>
                </el-row>
              </el-form>
            </el-main>
          </div>
          <div v-else>
            <el-main class="acitvemain">
              <el-button type="primary" @click="dialogaddform = true"
                >新增</el-button
              >
            </el-main>
          </div>
        </el-container>
      </div>
    </div>
    <div class="btn-pos">
      <el-button @click="pre" v-if="active > 1">上一步</el-button>
      <el-button @click="next()" v-if="active < 2">下一步</el-button>
      <el-button v-if="active > 1" @click="submit">提交</el-button>
    </div>
    <div class="backbtn">
      <el-button @click="goback">返回</el-button>
    </div>
    <!-- dialog弹窗表单 -->
    <el-dialog title="新增商品" :visible.sync="dialogaddform">
      <el-form :model="addform">
        <el-form-item label="商品名字" :label-width="formLabelWidth">
          <el-input v-model="addform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格" :label-width="formLabelWidth">
          <el-input v-model="addform.shopSpecs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-input
            v-model="addform.goodsClassificationName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价" :label-width="formLabelWidth">
          <el-input v-model="addform.salePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="月销量" :label-width="formLabelWidth">
          <el-input v-model="addform.rangeNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddform = false">取 消</el-button>
        <el-button type="primary" @click="dialogaddform = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import companyReport from "../../public/goods";
export default {
  data() {
    return {
      tabtwoform: {
        name: "",
        shopSpecs: "",
        goodsClassificationName: "",
        salePrice: "",
        rangeNum: "",
      },
      index: 0,
      udatatab2rule: {
        name: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        shopSpecs: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        goodsClassificationName: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        salePrice: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        rangeNum: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
      },
      udatarule: {
        value: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        name: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        channelName: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
        shopUrl: [
          {
            required: true,
            message: "此项为必填项，不能为空",
            trigger: ["change", "blur"],
          },
        ],
      },
      formLabelWidth: "120px",
      addform: {
        name: "",
        shopSpecs: "",
        goodsClassificationName: "",
        salePrice: "",
        rangeNum: "",
      },
      dialogaddform: false,
      udata: companyReport,
      value: "",
      active: 1,
      selectShopGoods: [],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    showfalse() {},
    submit() {
      console.log(this.udata, "提交数据");
    },
    skiptomap(row) {
      console.log(row.goodsList);
      this.selectShopGoods = row.goodsList;
    },
    goback() {
      this.$router.back();
    },
    addtab2() {
      this.valNumer = this.valNumer + 1;
      var list = {
        id: this.id,
        shopId: this.shopId,
        name: this.name,
        shopSpecs: this.shopSpecs,
        salePrice: this.salePrice,
        goodsClassificationName: this.goodsClassificationName,
        rangeNum: this.rangeNum,
      };

      this.selectShopGoods.push(list);
    },
    add() {
      this.valNumer = this.valNumer + 1;
      var list = {
        numbering: "编号" + `-${this.udata.companyShops.length + 1}`,
        name: this.name,
        channelName: this.channelName,
        shopUrl: this.shopUrl,
      };

      this.udata.companyShops.push(list);
    },
    handleDeletetab2(index, row) {
      // console.log("-----" + index);
      this.selectShopGoods.splice(index, 1);
      for (var i = index; i < this.selectShopGoods.length; i++) {
        this.selectShopGoods[i].numbering =
          "编号" +
          `-${Number(this.selectShopGoods[i].numbering.split("-")[1]) - 1}`;
      }
    },
    handleDeletetab1(index, row) {
      this.udata.companyShops.splice(index, 1);
      for (var i = index; i < this.udata.companyShops.length; i++) {
        this.udata.companyShops[i].numbering =
          "编号" +
          `-${Number(this.udata.companyShops[i].numbering.split("-")[1]) - 1}`;
      }
    },
    pre() {
      if (this.active-- < 2) this.active = 1;
    },

    // 下一页跳转判断
    next() {
      if (this.active++ > 2) this.active = 0;

      // this.$refs.udata.validate((valid) => {
      //   if (!valid) return this.$message.warning("请补充完全店铺信息 !");
      // });
    },
  },
};
</script>
<style lang="less" scoped>
.acitvemain {
  width: 1300px;
  min-width: 1300px;
  height: 600px;
  margin: 10px;
}
.form-items {
  height: 100px;
}

:deep(.steps .stepscon) {
  background: #428cdb;
}
:deep(.tablist .el-table thead) {
  display: none;
  border: none;
}
.tablist {
  cursor: pointer;
  border-right: 1px solid #e2e8f0;
}

:deep(.rightcon .el-table__body) {
  -webkit-border-horizontal-spacing: -10px; // 水平间距
  -webkit-border-vertical-spacing: -10px; // 垂直间距
}

:deep(.resizenone) {
  .el-textarea__inner {
    resize: none;
  }
}

:deep(.el-table th.el-table__cell > .cell) {
  font-size: 14px;
  font-weight: normal;
  color: #a0aec0;
}

:deep(.el-form--label-top .el-form-item__label) {
  padding: 0;
  margin: 0;
}

.shopform {
  .avatar {
    display: block;
    position: absolute;
    margin: 0px -50px;
  }
}

.backbtn {
  position: fixed;
  bottom: 40px;
  left: 340px;

  .el-button {
    width: 170px;
    background: transparent;
    border-radius: 12px;
    color: #000;
  }
}

.btn-pos {
  position: fixed;
  bottom: 40px;
  right: 140px;

  .el-button {
    color: #fff;
    border: none;
    width: 170px;
    background: linear-gradient(270deg, #65d1bd 0%, #428cdb 100%);
    border-radius: 12px;
  }
}

.active2 {
  align-items: center;
  padding: 40px;

  .leflist {
    width: 10%;

    > div :hover {
      cursor: pointer;
    }
  }
}

.stepscon {
  border-bottom: 1px solid #e2e8f0;
  padding: 20px;
}

.upload-con {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;

  .leftcon {
    height: 500px;
    padding: 40px;
    border-right: 1px solid #e2e8f0;
    min-width: 19%;
    width: 19%;
    margin-bottom: 30px;
  }

  .rightcon {
    margin: auto;
    margin-left: 90px;
    width: 1200px;
    height: 600px;
    min-width: 900px;
    margin-bottom: 50px;
  }
}
</style>
